<template>
  <div
    class="page-view"
  >
    <!-- 顶部 -->
    <div
      class="top"
    >
      <div class="top-div" />
      <img
        :src="schoolLogo"
        class="school-logo"
      >
      <!-- 顶部消息提醒 -->
      <div class="top-div right-top-div" />
    </div>

    <!-- banner轮播图 -->
    <div
      class="banner"
    >
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        class="banner-swipe"
      >
        <van-swipe-item
          v-for="item in BannerList"
          :key="item.Id"
        >
          <img
            :src="item.ImageUrl"
            class="banner-img"
            @click="onBannerClick(item.HrefUrl)"
          >
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 四个入口 -->
    <div class="entrance">
      <router-link
        :to="{name: 'courseIndex'}"
        class="entrance-box"
        tag="div"
      >
        <img
          src="~assets/home/index_mfk.png"
          class="entrance-img"
        >
        <span class="entrance-text">
          课程
        </span>
      </router-link>
      <router-link
        :to="{name: 'examIndex'}"
        class="entrance-box"
        tag="div"
      >
        <img
          src="~assets/home/index_mrk.png"
          class="entrance-img"
        >
        <span class="entrance-text">
          题库
        </span>
      </router-link>
      <div class="entrance-box">
        <a
          :href="ContactPhone ? 'tel://' + ContactPhone : 'javascript:void(0)'"
        >
          <img
            src="~assets/home/phone.png"
            class="entrance-img"
          >
          <span class="entrance-text">
            联系方式
          </span>
        </a>
      </div>
    </div>
    <div class="study-jilu">
      <router-link
        tag="div"
        class="study-box"
        :to="{name: 'videoRecords'}"
      >
        视频学习记录
      </router-link>
      <router-link
        tag="div"
        class="study-box"
        :to="{name: 'examRecords'}"
      >
        题库做题记录
      </router-link>
    </div>
    <!-- 免费课程 -->
    <div
      v-if="FreeExperience.length > 0"
      class="free-experience"
    >
      <div class="title-flex">
        <span class="title-text">
          免费课程
        </span>
        <router-link
          :to="{name: 'freeCourse'}"
          tag="span"
          class="title-more"
        >
          更多
          <img
            src="~assets/home/more-plus.png"
            class="more-plus"
          >
        </router-link>
      </div>
      <freeExperience
        v-for="(item, index) in FreeExperience"
        :key="index"
        :item="item"
      />
    </div>
    <!-- 招牌班级 -->
    <!-- <rightBottomFixed /> -->
    <!-- <scholarPopup />
    <liveTip /> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import store from '@/store/store'

export default Vue.extend({
  components: {
    freeExperience: () => import('components/Home/FreeExperience.vue'),
    // rightBottomFixed: () => import('components/Home/RightBottomFixed.vue'),
    // 奖学金功能机构&&未登录用户、被分享者打开点击“去体验”按钮进入首页&&未领取过奖学金时弹出
    // scholarPopup: () => import('components/Home/ScholarPopup.vue'),
    // // 直播提示
    // liveTip: () => import('components/Home/LiveTip.vue'),
  },
  data () {
    return {
      schoolLogo: '//testfiles.huikao8.cn/acc/trainingInfo/day_191108/201911080345585767.png',
      ContactPhone: '800-800-800',
      BannerList: [], // banner图列表
      FreeExperience: [], // 免费体验列表
      showSwipeBlock: true,
      query: {
        PaperId: 88,
        CourseId: 478,
        QuestionType: 0,
        Type: 1,
        continue: 0,
        doAgain: 0,
        classIndex: 0,
        ShowType: 0,
        showAnswer: '',
        // HistoryId: 21834,
      },
    }
  },
  created () {
    (this.$root.$children[0] as any).active = 0
    // if (!this.specialCategory) {
    //   this.getTeacherAndFreeCourseList()
    // }
    this.getBannerList()
    this.getFreeCourse()
  },
  methods: {
    getBannerList () {
      this.$axios({
        url: 'ytjysite/TBanner/GetModelList',
      }).then(res => {
        this.BannerList = res.Items
      })
    },
    getFreeCourse () {
      this.$axios({
        url: 'ytjysite/ECourse/GetFreeModelList',
        data: {
          PageIndex: 1,
          PageSize: 4,
        },
      }).then(res => {
        this.FreeExperience = res.Items
      })
    },
    swipeLeft (e: any) {
      console.log('swipeLeft', e, this.query.PaperId)
    },
    swipeRight (e: any) {
      console.log('swipeRight', e)
    },
    onBannerClick (url: string) {
      if (url) {
        window.open(url)
      }
    },
    // 调用拨号功能
    // onCallPhone () {
    //   if (this.$store.state.instInfo.ContactPhone) {
    //     window.location.href = 'tel://' + this.$store.state.instInfo.ContactPhone
    //   }
    // },
  },
})
</script>
<style lang="scss" scoped>
.page-view {
  color: $success;
}
.bgc-white {
  background-color: #fff;
}
.home-logo {
  width: 320px;
}
.hello-world {
  font-size: 30px;
}
.swiper {
  line-height: 60px;
  // border: 1px solid #000;
  @include px1border(all, #000);
  user-select: none;
}
.top {
  height: 100px;
  color: #333333;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background-color: #fff;
}
.top-div {
  flex: 1;
  display: flex;
  align-items: center;
}
.right-top-div {
  justify-content: flex-end;
}
.top-ck-slogan {
  font-size: 36px;
  padding: 0 10px;
  margin-top: 5px;
}
.classification-text {
  display: inline-block;
  font-size: 32px;
  min-width: 190px;
}
.arrow-down {
  vertical-align: text-top;
}
.school-logo {
  width: 195px;
}
.school-img {
  width: 100%;
}
// .message {
//   position: relative;
// }
// .message-img {
//   width: 44px;
//   margin-right: 40px;
// }

// 顶部直播提醒

// .filleted-corner {
//   position: absolute;
//   left: 23%;
//   top: 27%;
//   width: 52px;
//   height: 20px;
// }
// .message-live {
//   position: absolute;
//   left: 23%;
//   top: -11%;
//   width: 52px;
//   font-size: 8px;
//   color: #fff;
//   text-align: center;
// }
// .circle {
//   display: block;
//   position: absolute;
//   left: 25%;
//   top: 28%;
//   width: 20px;
//   height: 20px;
//   border-radius: 40px;
//   background-color: #BA2401;
// }
.share {
  width: 40px;
}
.banner {
  width: 100%;
}
.banner-swipe {
  width: 100%;
  height: 256px;
  background-color: #000;
  /deep/ {
    .van-swipe__indicators {
      padding: 0 10px;
      bottom: 8px;
    }
    .van-swipe__indicator--active {
      width: 40px;
      border-radius: 10px;
    }
  }
}
.banner-img {
  height: 100%;
  max-width: 100%;
}
.entrance-box {
  width: 25%;
  text-align: center;
  display: inline-block;
}
.entrance-img {
  width: 115px;
}
.entrance-text {
  font-size: 28px;
  color: #333;
  display: block;
}
.entrance {
  height: 180px;
  padding: 5px 0 0;
  background-color: #fff;
  margin-bottom: 20px;
}
.scholarship-img {
  width: 100%;
}
.more-plus {
  width: 20px;
  height: 20px;
}
.title-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  color: #333333;
  height: 95px;
  margin-bottom: 30px;
  @include px1border(bottom, #eaeaea);
}
.title-text {
  font-size: 36px;
  color: #333333;
}
.title-more {
  font-size: 28px;
  color: #666666;
}
.free-experience,.recommend-class,.teacher-introduce,.industry-feature {
  padding: 0 24px 30px;
  margin-top: 20px;
  text-align: left;
  background-color: #fff;
}
.module-title-box {
  margin-bottom: 30px;
  padding-bottom: 30px;
  line-height: 35px;
  @include px1border(bottom, #eaeaea);
}
.module-title-second-box {
  padding-top: 30px;
  margin-bottom: 30px;
  line-height: 35px;
}
.teacher-title {
  margin-bottom: 24px;
}
.module-title {
  font-size: 36px;
  color: #333333;
}
.class-more {
  font-size: 28px;
  color: #666666;
  float: right;
  padding-top: 10px;
}
.adult-edu-tab {
  margin-bottom: 20px;
  /deep/ .van-tabs__line {
      border-radius: 0px;
      background-color: $primary-web;
    }
}
.heart-beat {
  animation: heart-beat 1s infinite;
  will-change: transform;
}
@keyframes heart-beat {
  // 0% {
  //   transform: scale(1);
  // }
  25% {
    transform: scale(1.02);
  }
  // 50% {
  //   transform: scale(1);
  // }
  75% {
    transform: scale(0.95);
  }
  // 100% {
  //   transform: scale(1);
  // }
}
.study-jilu {
  background-color: #fff;
  height: 90px;
  display: flex;
  color: #333;
  justify-content: flex-start;
  padding: 10px 0;
  .study-box {
    font-size: 28px;
    width: 50%;
    line-height: 70px;
    text-align: center;
    &:first-child {
      border-right: 1px solid #eaeaea;
    }
  }
}
</style>
